import { useState } from "react"
import { Button } from 'antd';
// 主要是学习数组和对象的使用注意事项

export function UseStateDemo() {
  // 1. 数组和对象都不能像vue那样直接改源对象数据，都需要通过方法去做修改,不能直接调用影响数组的方法，比如push,pop,shif,unshif,sort,reverse
  // 2. useState允许接收一个初始化的函数，返回值就是初始值，并且只会执行一次
  // 3.useState 是一个 Hook，因此你只能在 组件的顶层 或自己的 Hook 中调用它。你不能在循环或条件语句中调用它。
  const [ arr, setArr] = useState([1,2,3,4,5])
  // 函数形式
  const [obj,setObj] = useState(()=> {
    return {
        name:'前端辣么菜',
        age:18
    }
  })

  const [count,setCount] =useState(0)

  //   数组增删查改
  const changeArrData = (type:string,index?:number,newVal?:any):any =>{
     switch (type) {
        case 'add':
            // 解构，不能直接调用影响数组的方法，比如push,pop,shif,unshif,sort,reverse
            setArr([...arr,6])
            break;
        case 'remove':
            // filter替代
            setArr(arr.filter((item)=>item!==2))
            break;
        case 'map':
            // 替换某个元素，用map
            setArr(
                arr.map((item) => item==3?30:item)
            ) 
            break;

        case 'splice':
            // 插入元素
            setArr(
                [
                    ...arr.slice(0,index),
                    newVal,
                    ...arr.slice(index)
                ]
            )
            break;

        case 'sort':
            // 排序，旋转，复制一个操作
            let newList = [...arr]//拷贝到新数组  
            setArr(newList.sort((a,b)=>a-b))
            
     }

  }

  // 对象改变
  const changeObj = ()=> {
    // 对象也不能直接改，通过解构或者Object,assgn
    setObj({
        ...obj,
        age:19
    })

  }
  const changeObj2 =() => {
    setObj(Object.assign({},obj,{name:'哈哈哈'}))

  }


  // useState异步
  const changeState = ()=> {
    // 1. 异步更新，通过函数获取最新值
   setCount(count+1)
   console.log('count',count)
   setCount(count+1)
   console.log('count',count)

   setCount(count+1) // 最后也是1，同样的执行会合并为一次
   console.log('count',count)

  }

  const changeState2 = ()=> {
    // 1. 异步更新，通过函数获取最新值
   setCount(count+1)
   setCount((count)=>count+1)
   setCount((count)=>count+1)
  }


    return (
        <div>
        <h3>数组和对象使用注意(useState是异步更新的</h3>
        <div>数组数值：{JSON.stringify(arr)}</div>
        <Button type="primary" onClick={()=> changeArrData('add')}>数组新增</Button>
        <Button type="primary" onClick={()=> changeArrData('remove')}>数组删除</Button>
        <Button type="primary" onClick={()=> changeArrData('splice',2,666)}>数组插入</Button>
        <Button type="primary" onClick={()=> changeArrData('sort')}>数组排序</Button>
        <Button type="primary" onClick={()=> changeArrData('map')}>数组替换</Button>

       <br />

       <div>对象数据：{JSON.stringify(obj)}</div>
      
       <Button type="primary" onClick={()=> changeObj()}>对象改变</Button>
       <Button type="primary" onClick={()=> changeObj2()}>对象改变2</Button>

       <h3>useState是异步更新的</h3>
       <div>cout值：{count}</div>
       <Button type="primary" onClick={()=> changeState()}>测试count多次执行</Button>
       <Button type="primary" onClick={()=> changeState2()}>测试count多次执行2，函数执行</Button>



        </div>


    )

}